<template>
	<view class="classify">
		<!-- 头部搜索栏 -->
		<view class="nav">
			<input type="text" value="" class="input" />
			 <view class="icon-small-wrp">
			      <icon class="icon-small" type="search" size="14"></icon>
				   <view class="icon-box-title">搜索</view>
			    </view>
		</view>
		<!-- 左边导航栏 -->
		<view class="leftNav">
			<view class="y1">
				大家电
			</view>
			<view class="y1">
				海外购
			</view>
			<view class="y1">
				苏宁房产
			</view>
			<view class="y1">
				手机相机
			</view>
			<view class="y1">
				电脑办公
			</view>
			<view class="y1">
				厨卫电器
			</view>
			<view class="y1">
				食品酒水
			</view>
			<view class="y1">
				居家生活
			</view>
			<view class="y1">
				厨房电器
			</view>
			<view class="y1">
				优质服装
			</view>
		</view>
		<!-- 顶部图片 -->
		<view class="top">
			<image class="topImg" src="../../static/titleImage.png" mode=""></image>
		</view>
		<!-- 电视 -->
		<view class="television">
		电视
		</view>
		<!-- 品牌 -->
		<view class="brand">
			<view class="no1">
				111
			</view>
			<view class="no2">
				111
			</view>
			<view class="no3">
				111
			</view>
			<view class="no4">
				111
			</view>
			<view class="no5">
				111
			</view>
			<view class="no6">
				111
			</view>
			<view class="no7">
				111
			</view>
			<view class="no8">
				111
			</view>
			<view class="no9">
				111
			</view>
			<view class="no10">
				111
			</view>
			<view class="no11">
				111
			</view>
			<view class="no12">
				111
			</view>
			
		</view>
	</view>
</template>

<script>
</script>

<style lang="less">
	.classify{
		position: relative;
		.nav{
			height: 100rpx;
			background-color: #ff2d4a;
			position: relative;
			.input{
				width: 90%;
				background-color: #ffffff;
				position: absolute;
				top: 10rpx;
				left: 40rpx;
				height: 60rpx;
				padding-top: 20rpx;
				border-radius: 10rpx;
			}
			.icon-small-wrp{
				position: relative;
				.icon-small{
					position: absolute;
					top: 35rpx;
					left: 340rpx;
					font-size: 30rpx;
				}
				.icon-box-title{
					position: absolute;
					top: 35rpx;
					color: #c2c2c2;
					left: 380rpx;
					font-size: 26rpx;
					
				}
			}
		}
		.leftNav{
			width: 230rpx;
			height: 100%;
			background-color: #f4f4f4;
			.y1{
				height: 80rpx;
				width: 100%;
				text-align: center;
				padding-top: 40rpx;
				border-bottom: 1rpx solid #ccc;
			}
		}
		.top{
			position: absolute;
			top: 120rpx;
			left: 250rpx;
			height: 180rpx;
			background-color: red;
			width: 360rpx;
			padding-right: 120rpx;
			.topImg{
				width: 480rpx;
				height: 182rpx;
			}
		}
		.television{
			margin-top: 10rpx;
			width: 480rpx;
			height:80rpx;
			position: absolute;
			top: 300rpx;
			left: 250rpx;
			text-align: center;
			padding-top: 40rpx;
		}
		.brand{
			
			.no1{
				width: 120rpx;
				height: 120rpx;
				background-color: pink;
				position: absolute;
				top: 450rpx;
				left: 250rpx;
			}
			.no2{
				width: 120rpx;
				height: 120rpx;
				background-color: pink;
				position: absolute;
				top: 450rpx;
				left: 420rpx;
			}
			.no3{
				width: 120rpx;
				height: 120rpx;
				background-color: pink;
				position: absolute;
				top: 450rpx;
				left: 600rpx;
			}
			.no4{
				width: 120rpx;
				height: 120rpx;
				background-color: pink;
				position: absolute;
				top: 600rpx;
				left: 250rpx;
			}
			.no5{
				width: 120rpx;
				height: 120rpx;
				background-color: pink;
				position: absolute;
				top: 600rpx;
				left: 420rpx;
			}
			.no6{
				width: 120rpx;
				height: 120rpx;
				background-color: pink;
				position: absolute;
				top: 600rpx;
				left: 600rpx;
			}
			.no7{
				width: 120rpx;
				height: 120rpx;
				background-color: pink;
				position: absolute;
				top: 750rpx;
				left: 250rpx;
			}
			.no8{
				width: 120rpx;
				height: 120rpx;
				background-color: pink;
				position: absolute;
				top: 750rpx;
				left: 420rpx;
			}
			.no9{
				width: 120rpx;
				height: 120rpx;
				background-color: pink;
				position: absolute;
				top: 750rpx;
				left: 600rpx;
			}
			.no10{
				width: 120rpx;
				height: 120rpx;
				background-color: pink;
				position: absolute;
				top: 900rpx;
				left: 250rpx;
			}
			.no11{
				width: 120rpx;
				height: 120rpx;
				background-color: pink;
				position: absolute;
				top: 900rpx;
				left: 420rpx;
			}
			.no12{
				width: 120rpx;
				height: 120rpx;
				background-color: pink;
				position: absolute;
				top: 900rpx;
				left: 600rpx;
			}
		}
			
	}
</style>
